import React, { useEffect, useState,useContext } from 'react'
import { Card, Space, Table, Image, Button, Timeline, Tag } from 'antd';
import { Col, Row } from 'antd';
import '../../css/public.less'
import './css/OrderListCss/OrderListDetail.less'
import OrderBtn from './child/OrderBtn'
import OrderLogistics from './child/OrderLogistics'
import createContext from '../../../utils/gyqContext'
import { WechatFilled,AlipayCircleOutlined,SkypeOutlined} from '@ant-design/icons';
import { useNavigate, useLocation } from 'react-router-dom'
import { getOrderDetailById } from '../../../api/OrderApi'
import { dataTool } from 'echarts';
const { Column, ColumnGroup } = Table;



interface DataType {
    key: React.Key;
    orderId: number;//订单编号
    orderCreated: string;//创建时间
    userId: string; //用户账号
    itemTotal: number;
    paymentMethod: number; //支付方式
    orderSource: number;//订单来源
    orderState: number; //订单状态
    skuPrice: number;//单价
    skuMsg: string;//商品属性
    itemNum: number;//数量
    goodsId: number;//商品id
    goodsName: string;//商品名称
    conName: string;//联系人姓名
    conAddress: string;//地址
    conPhone: string;//电话
    payMoney: number;//支付总计
    conId: number;//规格id
}

const Orderdetails = () => {
    // const navigate = useNavigate()
	// const context = useContext<any>(createContext)

    // 路由接受参数
    const locatioin = useLocation()
    // 解构出state
    const { state } = locatioin;
    console.log('state', state);



    // 声明订单详细信息
    const [orderInfo, setOrderInfo] = useState<DataType[]>([])

    // 请求订单详情信息
    useEffect(() => {
        getOrder()
    }, [])

    const getOrder = () => {
        getOrderDetailById({
            orderId: state.orderId
        }).then(res => {
            console.log('订单详细信息', res.data);
            setOrderInfo([res.data])
        }).catch(err => {
            console.log('err444', err);
        })
    }

    // console.log('');
    

    //数据解构
    let goodsId = { ...orderInfo[0] }.goodsId;
    let conName = { ...orderInfo[0] }.conName;
    let conId = { ...orderInfo[0] }.conId;
    let conAddress = { ...orderInfo[0] }.conAddress;
    let conPhone = { ...orderInfo[0] }.conPhone;


    // 判断当前订单处于什么状态
    let oDiv :any = null
    console.log('state.status', state.status);

    if (state.status == 1 || state.status == 3 || state.status == 2 || state.status == 4) {
        {/* 按钮 */ }
        oDiv = <OrderBtn value={{ ...state, goodsId, conName, conAddress, conPhone, conId }}></OrderBtn>
        console.log('点击了按钮');

    } else if (state.status == 5 || state.status == 6) {
        console.log('1212121212');

        {/* 物流 */ }
        oDiv = <OrderLogistics></OrderLogistics>
    } else {
        oDiv = null
    }

    // // 点击修改订单进入修改订单详情页面
    // const updateOrder = () => {
    //     navigate('/home/order/OrderdetailsDel')
    // }

    return (
        <div className='orderdetails'>
        <createContext.Provider value={{getOrder}}>
        <div className='page-top'>
            {/* 左边标题 */}
            <div className='page-title'>
                <p>订单详情</p>
            </div>
        </div>
        <div className='page-div'>
            <Card title="订单状态：" type="inner" className='detail_content'>
                {/* 订单信息 */}
                <div className="order_info">
                    <p>订单信息</p>
                    <Table bordered={true} dataSource={orderInfo} pagination={false} rowKey={item => item.orderCreated}>
                        <Column title="订单编号" dataIndex="orderId" key="orderId" />
                        <Column title="订单状态" dataIndex="orderState" key="orderState"
                            render={(_: any, record: DataType) => (
                                record.orderState == 1 ? '待确认' : record.orderState == 2 ? '未支付' :
                                    record.orderState == 3 ? '已支付' : record.orderState == 4 ?
                                        '未发货' : record.orderState == 5 ? '已发货' : record.orderState == 6 ? '已签收' : '已关闭'
                            )}
                        />
                        <Column title="支付方式" dataIndex="paymentMethod" key="paymentMethod"
                            render={(_: any, record: DataType) => (

                                record.paymentMethod == 1 ? <Tag icon={<WechatFilled />} color="#55acee">
                                    微信支付
                                </Tag> : record.orderSource == 2 ? <Tag color="#2db7f5" icon={<AlipayCircleOutlined />}>支付宝支付</Tag> :
                                    <Tag color="#87d068" icon={<SkypeOutlined />}>其他支付</Tag>
                            )} />
                        {/* <Column title="用户账号" dataIndex="userId" key="userId" /> */}
                        <Column title="提交时间" dataIndex="orderCreated" key="orderCreated" />
                        <Column title="订单来源" dataIndex="orderSource" key="orderSource"
                            render={(_: any, record: DataType) => (
                                record.orderSource == 1 ? <Tag color="#f50">App订单</Tag> : record.orderSource == 2 ? <Tag color="#2db7f5">PC订单</Tag> : <Tag color="#87d068">小程序订单</Tag>
                                // </Tag>
                            )}
                        />
                    </Table>
                </div>
                {/* 收货人信息 */}
                <div className="addressee_info">
                    <p>收货人信息</p>
                    <Table bordered={true} dataSource={orderInfo} pagination={false} rowKey={item => item.orderCreated}>
                        <Column title="姓名" dataIndex="conName" key="conName" />
                        <Column title="手机号" dataIndex="conPhone" key="conPhone" />
                        <Column title="邮政编码" dataIndex="postalCode" key="postalCode" />
                        <Column title="收获地址" dataIndex="conAddress" key="conAddress" />
                    </Table>
                </div>
                {/* 商品信息 */}
                <div className="goods_info">
                    <p>商品信息</p>
                    <Table bordered={true} dataSource={orderInfo} pagination={false} rowKey={item => item.orderCreated}>
                        <Column title="商品名称" dataIndex="goodsName" key="goodsName" />
                        <Column title="商品图片" dataIndex="skuImag" key="skuImag"
                            render={(_: any, record: DataType) => (
                                <Image
                                    className='goods_picture'
                                    width={100}
                                    height={100}
                                    src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
                                />
                            )}
                        />
                        <Column title="商品单价" dataIndex="skuPrice" key="skuPrice" />
                        <Column title="属性" dataIndex="skuMsg" key="skuMsg"
                            render={(_: any, record: DataType) => (
                                <Tag>{record.skuMsg}</Tag>
                            )}
                        />
                        <Column title="商品数量" dataIndex="itemNum" key="itemNum" />
                        <Column title="买家备注" dataIndex="remarks" key="remarks" />
                        <Column title="小计" dataIndex="goods_total" key="goods_total"
                            render={(_: any, record: DataType) => (
                                <span>{Number(orderInfo[0].skuPrice) * Number(orderInfo[0].itemNum)}</span>
                            )}
                        />
                    </Table>
                </div>
                <div className="cost_total">
                <h5>费用合计</h5>
                <Table bordered={true} dataSource={orderInfo} pagination={false} rowKey={item => item.conId}>
                    <Column title="商品合计" dataIndex="itemTotal" key="itemTotal"
                        render={(_: any, record: DataType) => (
                            <span>{record.itemTotal}</span>
                        )}
                    />
                    <Column title="运费" dataIndex="transportationExpenses" key="transportationExpenses" />
                    <Column title="优惠金额" dataIndex="preferentialAmount" key="preferentialAmount" />
                    <Column title="费用合计" dataIndex="payMoney" key="payMoney"
                        render={(_: any, record: DataType) => (
                            <span>{record.payMoney}</span>
                        )}
                    />
                </Table>
            </div>
                <div className="bottom_box">
                    {/* 动态渲染的结构 */}
                    {oDiv}
                </div>
            </Card>
        </div>
        </createContext.Provider>
    </div>
        
    )
}

export default Orderdetails
